import React,{useState,useEffect} from 'react'
import { Form, Input, Button, Checkbox,Select,Radio,message   } from 'antd';
import {useDispatch,useSelector} from "react-redux"
import querystring from 'querystring'



const { Option } = Select;

export default function UserAddModal(props) {
    const [value, setValue] = React.useState("1");
    const [value2, setValue2] = React.useState("0");
    const dispatch = useDispatch()
    //获取所有角色数据和部门数据
    const result =useSelector(state=>state.userRc)



    //点击新增
    const onFinish = (values) => {
     
     let result=   querystring.stringify(values)
     dispatch({
       type:'addUser',
       payload:result
     })
     message.success('新增成功')
     props.getAllusers()
     props.setVisible(false)


      };
    //没有输入点击提交
      const onFinishFailed = (errorInfo) => {
       console.log(errorInfo);
      };

      //下拉选择角色
      const handleChange=(value)=> {
        console.log(`selected ${value}`);
      }
      //下拉选择部门
      const handleChange2=(value)=> {
        console.log(`selected ${value}`);
      }
        //单选角色
      const onChange = e => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
      };
      //单选部门
      const onChange2 = e => {
        console.log('radio checked', e.target.value);
        setValue2(e.target.value);
      };

      //页面一进来执行
      useEffect(()=>{
          //获取角色数据
          dispatch({
            type:'getRole'
          })

      },[])

    return (
        <>
         <Form
      name="basic"
      labelCol={{
        span: 5,
      }}
      wrapperCol={{
        span: 19,
      }}
      initialValues={{
        remember: true,
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="用户名"
        name="username"
        rules={[
          {
            required: true,
            message: '必须输入用户名',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="密码"
        name="password"
      >
        <Input />
      </Form.Item>


      <Form.Item
        label="邮箱"
        name="email"
      >
        <Input />
      </Form.Item>


      <Form.Item
        label="手机"
        name="phone"
      >
        <Input />
      </Form.Item>


    <Form.Item
        label="角色"
        name="roleId"
        rules={[
            {
              required: true,
              message: '必须选择角色',
            },
          ]}
      >
      <Select
      mode="multiple"
      allowClear
      style={{ width: '100%' }}
      placeholder="请选择角色"
      onChange={handleChange}
    >
      {result.role.map(item=>{
        return(
          <Option key={item.roleId} value={item.roleId}>{item.roleName}</Option>
        )
      })}
    </Select>
      </Form.Item>

      <Form.Item
        label="部门"
        name="deptId"
      >
    <Select style={{ width: "100%" }} onChange={handleChange2}>
      {result.dept.map(item=>{
        return (
          <Option value={item.id} key={item.id}>{item.title}</Option>
        )
      })}
     
     
    </Select>
      </Form.Item>

      <Form.Item
        label="状态"
        name="status"
        rules={[
            {
              required: true,
              message: '必须选择状态',
            },
          ]}
      >
            <Radio.Group onChange={onChange} value={value}>
      <Radio value="0">锁定</Radio>
      <Radio value="1">有效</Radio>
    </Radio.Group>
      
      </Form.Item>

      <Form.Item
        label="性别"
        name="ssex"
        rules={[
            {
              required: true,
              message: '必须选择性别',
            },
          ]}
      >
    <Radio.Group onChange={onChange2} value={value2}>
      <Radio value="0">男</Radio>
      <Radio value="1">女</Radio>
      <Radio value="2">保密</Radio>
    </Radio.Group>
      
      </Form.Item>



  





      <Form.Item
        wrapperCol={{
          offset: 5,
          span: 19,
        }}
      >
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>

            
        </>
    )
}
